<template>
  <div class="divBox">
    <el-card class="box-card">
      <div
        style="
          font-size: 20px;
          font-weight: 600;
          text-align: center;
          margin: 0px;
        "
      >
        {{ this.$route.meta.title }}
      </div>
      <el-form
        size="small"
        v-loading="loading"
        style="padding: 15px"
        label-width="auto"
        ref="tableData"
        :rules="dataRules"
        :model="tableData"
      >
        <el-form-item label="快递公司" prop="kd">
          <el-select v-model="tableData.kd" placeholder="请选择快递公司">
            <el-option label="快递公司" value=""></el-option>
          </el-select>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <el-form-item label="寄方" prop="jf">
              <el-input v-model="tableData.jf" placeholder=""> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="收方" prop="sf">
              <el-input v-model="tableData.sf" placeholder=""> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <el-form-item label="预约取件" prop="jf">
              <el-input v-model="tableData.jf" placeholder=""> </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="取件员" prop="sf">
              <el-input v-model="tableData.sf" placeholder=""> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <el-form-item label="单据号" prop="jf">
              <el-input v-model="tableData.jf" placeholder=""> </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-table
          ref="tableData"
          v-loading="loading"
          :data="tableData.list"
          highlight-current-row
          max-height="400px"
          :header-cell-style="{ background: 'rgba(255, 240, 214, 1)' }"
          :row-style="
            ({ row, rowIndex }) => {
              return { background: 'rgba(255, 255, 255, 1)' };
            }
          "
        >
          <el-table-column
            label="序号"
            type="index"
            width="50px"
          ></el-table-column>
          <el-table-column label="物品名称" prop="name" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-input v-model="scope.row.name"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="件数"
            prop="name"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="物品重量"
            prop="name"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="体积"
            prop="name"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="价保"
            prop="name"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="增值费用"
            prop="name"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="用户费用合计"
            prop="name"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            label="承运商费用"
            prop="name"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column width="50px">
            <template slot="header">
              <el-tooltip effect="dark" content="添加行" placement="top">
                <el-button
                  size="small"
                  :disabled="disabled"
                  icon="el-icon-plus"
                  circle
                  style="background-color: rgba(255, 240, 214, 1)"
                  @click="newLine"
                ></el-button>
              </el-tooltip>
            </template>
            <template slot-scope="scope">
              <el-tooltip effect="dark" content="删除行" placement="top">
                <el-button
                  size="small"
                  :disabled="disabled"
                  type="danger"
                  icon="el-icon-close"
                  circle
                  @click="deleteLine(scope.$index, scope)"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <el-form-item style="margin-top: 15px; right">
          <el-button
            size="small"
            :loading="loading"
            type="primary"
            style="
              background-color: rgba(255, 195, 0, 1);
              border-color: rgba(255, 195, 0, 1);
            "
            @click="getTableList"
            >提交订单</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import * as roleApi from "@/api/role.js";
export default {
  name: "BillDetail",
  data() {
    return {
      //获取定义的常量
      constants: this.$constants,
      //表格数据
      tableData: { list: [] },
      //行数据
      tableRow: {
        name: "静态页面",
      },
      //提交参数
      listPram: {
        keyWord: null,
        page: 1,
        limit: this.$constants.page.limit[0],
      },
      loading: false,
      dataRules: [{}, {}],
      //是否可以写入
      disabled: false,
    };
  },
  created() {
    this.resetGrid();
    //this.type = parseInt(this.$route.params.type);
    //this.listPram.type = parseInt(this.$route.params.type)
  },
  mounted() {},
  methods: {
    //重置
    resetGrid() {
      this.tableData.list = [];
      for (let index = 0; index < 5; index++) {
        this.newLine();
      }
    },
    //获取表格分页数据
    getTableList() {
      /*
      this.loading = true      
      roleApi.roleGetPageList(this.listPram).then(res => {
        this.listData = res.data
        this.loading = false
      }).catch((err) => {
        this.loading = false
        this.$message.error(err.msg)
      })
      */
    },
    //添加行
    newLine() {
      this.tableData.list.push(JSON.parse(JSON.stringify(this.tableRow)));
      //this.tableData.push(this.tableRow)
    },
    //删除行
    deleteLine(index, scope) {
      console.log(scope);
      this.tableData.list.splice(index, 1);
    },
  },
};
</script>

<style scoped>
</style>
